import { ScrollView, Text, View } from "react-native";
import NavBar from "@/components/NavBar";
import tw from "twrnc";
import Icon from 'react-native-vector-icons/AntDesign';
import { useState } from "react";
import { useDispatch } from 'react-redux';
import { setLanguage } from '@/store/modules/InfoSlice';
import { router } from "expo-router";

const languageList = [
    { id: 0, name: "中文（简体）" },
    { id: 1, name: "中文（繁體）" },
    { id: 2, name: "English" },
    { id: 3, name: "日本語" },
    { id: 4, name: "한국어" },
    { id: 5, name: "Español" },
    { id: 6, name: "Français" },
    { id: 7, name: "Deutsch" },
    { id: 8, name: "Italiano" },
    { id: 9, name: "Português" },
    { id: 10, name: "Русский" },
    { id: 11, name: "العربية" },
    { id: 12, name: "हिन्दी" },
    { id: 13, name: "বাংলা" },
    { id: 14, name: "ไทย" },
]


export default function Language() {
    const dispatch = useDispatch();
    // 用来保存当前选中的语言项的 id
    const [selectedItem, setSelectedItem] = useState(null);

    // 处理点击事件，切换选中状态
    const handleSelectItem = (id,name) => {
        setSelectedItem(prev => (prev === id ? null : id));  // 点击已选中项时取消选择
        dispatch(setLanguage(name)); // 设置语言
        router.push('/(auth)/perfect-info')
    };
    return (
        <View style={tw`flex-1`}>
            <NavBar title="语言" rightElement={true} />
            <ScrollView>
                {languageList.map(item => (
                    <View key={item.id} style={tw`flex-row items-center justify-between p-2 my-3`}>
                        <Text
                                style={tw`ml-2  ${selectedItem === item.id && 'text-teal-300'}`}
                                onPress={() => handleSelectItem(item.id,item.name)}
                            >
                                {item.name}
                            </Text>
                            {selectedItem === item.id && (
                                <Icon
                                    name="check"
                                    size={20}
                                    color="#26EBD7"
                                />
                            )}
                    </View>
                ))}
            </ScrollView>
        </View>
    )
}


